<template>
	<view class="">
		<view class="wraper">
			<wd-sidebar v-model="active" @change="handleChange">
				<wd-sidebar-item v-for="(item, index) in categories" :key="index" :value="index" :label="item.name" />
			</wd-sidebar>
			<view class="list" :style="`transform: translateY(-${active * 100}%)`">
				<scroll-view v-for="(item, index) in categories" :key="index" class="category" scroll-y
					scroll-with-animation :show-scrollbar="false" :scroll-top="scrollTop" :throttle="false">
					<view v-for="(cell, index2) in item.goodsList" :key="index2" class="flex items-center pp" style="border-bottom: 1px solid #eee;">
						<image
							:src="cell.logo"
							alt="joy" style="border-radius: 4px; margin-right: 12px;height: 80px;width: 80px;" />
							<view class="flex-1 flex flex-col " style="gap: 2px;">
								<view style="font-size: 15px;color: #000;">
									{{cell.name}}
								</view>
								<view style="color: rgba(0,0,0,0.25); font-size: 12px;">库存:{{cell.stock}}</view>
								<view style="color: rgba(0,0,0,0.25); font-size: 12px;">已售:{{cell.initSale}}</view>
								<view class="flex " style="justify-content: space-between;">
									<view style="color: red;font-size: 16px;margin-bottom: 10rpx;">
										¥{{cell.price}}
									</view>
									<wd-input-number v-model="cell.number" :max="cell.stock -cell.initSale " @minClick="handleNumberChange('-',cell)" @plusClick="handleNumberChange('+',cell)" />
								</view>
							</view>
					</view>
			
				</scroll-view>
			</view>
		</view>
		
		<view class="footer flex items-center pxp" style="justify-content: space-between;">
			<view style="font-size: 32rpx;color: red;">
				¥{{total}}
			</view>
			<view class="">
				<wd-button :disabled="total ===  0" @click="handleGoToOrder">结算</wd-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getCatesApi
	} from "@/api/goods.js"
	import userApi from "@/api/user.js"
	import {
		ref,
		nextTick,
		computed
	} from 'vue'
	const active = ref(0)
	const scrollTop = ref(0)
	const categories = ref([])
	
	const total = computed(()=>{
		let number = 0
		if(categories.value.length){
			categories.value.map(item =>{
				if(item.goodsList && Array.isArray(item.goodsList) && item.goodsList.length > 0) {
					item.goodsList.map(cell =>{
						number = number + (cell.price * cell.number)
					})
				}
			})
			
		}
		return number
	})


	const init = () => {
		userApi.getCartList().then(cartRes =>{
			const cartList = cartRes.list
			getCatesApi().then(res => {
			
				res.map(item =>{
					if(item.goodsList && Array.isArray(item.goodsList) && item.goodsList.length > 0) {
						item.goodsList.map(cell =>{
							const result = cartList.find(item => item.goodsId === cell.id);
							cell.number = result ? result.num : 0;
							
						})
					}
				})
				categories.value = res
			})
		})
		
		
	}

	init()

	const handleChange = ({
		value
	}) => {
		active.value = value
		scrollTop.value = -1
		nextTick(() => {
			scrollTop.value = 0
		})
	}
	
	const handleGoToOrder = (e) =>{

		uni.navigateTo({
			url: "/pages/shop/order_confirm"
		})
	}
	
	const handleNumberChange = (action ,cell) =>{
		userApi.cartSave({
			action : action,
			goodsId : cell.id
		})
	}
</script>

<style lang="scss" scoped>
	.footer{
		height: 120rpx;
		background-color: #fff;
		border-top: 1px solid #eee;
	}
	
	.wraper {
		display: flex;
		height: calc(100vh - var(--window-top) - 120rpx);
		overflow: hidden;
	}

	.list {
		flex: 1;
		background: #fff;
		transition: transform 0.3s ease;
	}

	.category {
		box-sizing: border-box;
		height: 100%;
	}

	.wd-sidebar {
		flex-shrink: 0 !important;
	}

	.content,
	.title {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.content {
		justify-content: flex-start;
	}

	.title {
		justify-content: space-between;
	}

	.title-tip {
		color: rgba(0, 0, 0, 0.25);
		font-size: 12px;
	}
</style>